
<!--<!DOCTYPE html>
<html>
<head lang="en">
        <meta charset="UTF-8">
        <title></title>

</head>
<body>
<input type="text" id="hello" placeholder="请输入内容" value="">
<script>
    function addEvent(el,type,listener){
        if(el.addEventListener){
            el.addEventListener(type,listener,false);
        }else if(el.attachEvent){
            el.attachEvent("on"+type,listener);
        }else{
            el["on"+type]=listener;
        }
    }

    var input=document.getElementById("hello");
    function getTar(e){
        var event=e||window.event;
        return event.target||event.srcElement;

    }
    function focusHandler(e){
        var target=getTar(e);
        target.placeholder="";
    }
    function blurHandler(e){
        var target=getTar(e);
        if(this.value!=""){
            this.value=target.value;
        }else{
            target.placeholder="请输入内容";
        }
    }
    addEvent(input,"focus",focusHandler);
    addEvent(input,"blur",blurHandler);

</script>
</body>
</html>--->

<html>
<head>
        <title>输入框</title>
        <meta charset="utf-8">
        <style>
            #content{
        color:grey;
    }</style>
</head>
<body>
    <input type="text" value="请输入内容" id="content"/>
    <script>
    var oInt = document.getElementById('content');
    oInt.onfocus = function (){
        if(this.value == '请输入内容'){
            this.value = '';

        }
    }
    oInt.onblur = function (){
        if(this.value == ''){
            this.value = '请输入内容';
            this.style.color = 'grey';
        }
    }
</script>
</body>
</html>